import { defineComponent } from "vue"
// 可以全局注册
// import { QBtn } from 'quasar'; 
export default defineComponent({
    name: "GrandChild",
    // 定义 props
    props: {
        a: {
            type: [Number, String], // 假设 a 可以是数字或字符串类型
            default: null,
        },
        b: {
            type: [Number, String],
            default: null,
        },
        c: {
            type: [Number, String],
            default: null,
        },
        d: {
            type: [Number, String],
            default: null,
        },
        x: {
            type: [Number, String],
            default: null,
        },
        y: {
            type: [Number, String],
            default: null,
        },
        updateA: {
            type: Function,
            required: true,
        },
    },
    setup(props) {
        return () => (
            <div class="grand-child">
                <h3>孙组件</h3>
                {/* 确保使用 QBtn 时，首字母大写。在 JSX 中，<q-btn> 会被当作普通的 HTML 标签处理，而 <QBtn> 才会被识别为 Vue 组件。 */}
                <span>a：{props.a}</span>
                <span>b：{props.b}</span>
                <span>c：{props.c}</span>
                <span>d：{props.d}</span>
                <span>x：{props.x}</span>
                <span>y：{props.y}</span>
                <QBtn
                    color="primary"
                    icon="check"
                    label="点我将爷爷那的a更新"
                    onClick={() => props.updateA(6)}
                />
            </div>
        )
    },
})
